<style lang="less">
.img-simple{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  input{
    width:100%;
    height:100%;
    opacity:0;
  }
  z-index:2;
}
.result-img{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  .box{
    position:relative;
    height:4.5rem;
    overflow:hidden;
    p{
      width:100%;
      height:100%;
    }
    img{
      width:100%;
      height:100%;
      /*position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      transform:translate(-50%,-50%);*/
    }
  }
}
</style>
<template>
<div class="form-wrap2 mb30">
  <p class="txt">{{word}}</p>
  <div class="camera-wrap" v-if="edit"  @click="getImage()">
    <!-- <i class="iconfont icon-add"></i> -->
    <div class="footer"><i class="iconfont icon-camera"></i>上传{{word}}</div>
    <!--
    <div class="img-simple">
      <input type='file' accept="image/gif, image/jpeg, image/jpg, image/png" @change="getPic">
    </div>
    -->
    <div class="result-img">
      <div class="box">
        <p v-for="(item, index) in picJson.imgLista">
          <img :src="item | simpleImgUrl" v-if="item.indexOf('File') > -1">
          <img :src="item" v-else>
          <!-- <img :src="item | simpleImgUrl" v-if="item.indexOf('File') > -1" class="hidden">
          <img :src="item" v-else class="hidden"> -->
        </p>
      </div>
    </div>
  </div>

  <div class="camera-wrap" v-else>
    <div class="result-img">
        <div class="box">
          <p v-for="(item, index) in picJson.imgLista" @click="getPreImg(item)">
            <img :src="item | simpleImgUrl" v-if="item.indexOf('File') > -1">
            <img :src="item" v-else>
            <!-- <img :src="item | simpleImgUrl" v-if="item.indexOf('File') > -1" class="hidden">
            <img :src="item" v-else class="hidden"> -->
          </p>
      </div>
    </div>
  </div>
  <div class="mask" v-if="showPic" @click="showPic=''"></div>
  <div class="pre-pic" v-if="showPic" @click="showPic=''"><img :src="showPic"></div>
</div>
</template>
<script>
export default{
  props:['word',"list","max","editflag"],
  data(){
    return{
      showPic:''
    }
  },
  computed:{
    picJson(){
      if(this.list){
        var arr = {};
        arr.imgLista = this.list.imgLista;
        arr.imgListBase = this.list.imgListBase;
        return arr;
      }else{
        return '';
      }
    },
    userinfo(){
      if(localStorage.UserInfo){
        return JSON.parse(localStorage.UserInfo)
      };
    },
    limit(){
      if(!this.max || this.max > 9){
        return 9;
      } else {
        return this.max
      }
    },
    edit(){
       return this.editflag;
    },
  },
  methods:{
    getPreImg(val){
      var value;
      if (val.indexOf("File") > -1) {
        this.showPic = "https://image.csyaoly.com" + val;
      } else {
        this.showPic = val;
      };
    },
    getImage(){
      var self = this;
      // if(self.limit == 1 && self.picJson.imgLista.length > 0)
      // {
      //   self.$vux.toast.show({
      //     type:'text',//success, warn, cancel, text
      //     text: '只能上传一张图片，请删除图片后再上传',
      //   });
      // }
      // else
      // {
      // let currentSize = this.picJson.imgLista.length;
        self.jWeixin.chooseImage({
          count: self.limit, // 默认9
          sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
          success: function(res) {
            var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
            if (localIds.length > self.limit) {
              self.$vux.toast.show({
                type:'text',//success, warn, cancel, text
                text: '最多上传'+ self.limit +'张图片',
              });
              return false;
            }
            self.delImg(0);
            localIds.forEach(li => {
              self.picJson.imgLista.push(li);
            });
            self.getLocalImgDataC(0);
          }
        });
      // }
    },

    getLocalImgDataC(index) {
      var self = this;
      this.jWeixin.getLocalImgData({
        localId: self.picJson.imgLista[index], // 图片的localID
        success: function(res) {
          let localData = res.localData;
          if (window.__wxjs_is_wkwebview) {
            var imgbase64 = localData.substr((localData.indexOf('base64') + 7),localData.length);
            self.picJson.imgLista.splice(index, 1, localData);
            self.picJson.imgListBase.push(imgbase64);
          } else {
            self.picJson.imgListBase.push(localData);
          }
          self.getLocalImgDataC(index + 1);
        }
      });
    },
    //删除图片
    delImg(index) {
      this.picJson.imgLista.splice(index, 1);
      this.picJson.imgListBase.splice(index, 1);
    },
  }
}
</script>